<template>
  <!-- 顶部标题栏 -->
  <div
    class="w-full h-8 bg-black text-white flex items-center justify-end pl-4 select-none relative"
    style="-webkit-app-region: drag"
  >
    <div class="text-xs font-medium absolute left-1/2 -translate-x-1/2">多路RTSP流全景拼接系统</div>

    <!-- 按钮区域（不可拖动）-->
    <div class="flex items-center " style="-webkit-app-region: no-drag">
      <!-- 最小化 -->
      <button
        class="w-8 h-8 hover:bg-gray-700 flex items-center justify-center"
        title="最小化"
        @click="minimizeWindow"
      >
      <span class="icon-[material-symbols--chrome-minimize-sharp] mb-2"></span>
      </button>
      <!-- 最大化 / 还原 -->
      <button
        class="w-8 h-8 hover:bg-gray-700 flex items-center justify-center"
        :title="isMaximized ? '还原' : '最大化'"
        @click="maximizeWindow"
      >
        <span class="text-sm">
          <span v-if="isMaximized" class="icon-[mingcute--restore-line] mt-1"></span>
          <span v-else class="icon-[fluent--maximize-20-filled] mt-1"></span>
        </span>
      </button>
      <!-- 关闭 -->
      <button
        class="w-8 h-8 hover:bg-red-600 flex items-center justify-center"
        title="关闭"
        @click="closeWindow"
      >
      <span class="icon-[ri--close-line]"></span>
      </button>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'

const isMaximized = ref(false)

const minimizeWindow = () => {
  window.api.minimize()
}
const maximizeWindow = () => {
  window.api.maximize()
}
const closeWindow = () => {
  window.api.close()
}

onMounted(async () => {
  // 初始化时获取一次
  isMaximized.value = await window.api.isMaximized()
  // 监听最大化/还原事件
  window.api.onMaximize(() => {
    isMaximized.value = true
  })
  window.api.onUnmaximize(() => {
    isMaximized.value = false
  })
})
</script>

<style scoped></style>
